<template>
  <el-dialog :title="title" :width="width"
             :visible.sync="isShowVisible"
             center :close-on-click-modal="false"
             :before-close="() => $emit('close')">
    <el-card v-loading="isLoading">
      <el-form label-width="105px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="物料编码:">
              <span>{{materialData.fnumber}}</span>
            </el-form-item>
          </el-col>
         <el-col :span="12">
           <el-form-item label="物料名称:">
             <span>{{materialData.fname}}</span>
           </el-form-item>
         </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="简称:">
              <span>{{materialData.fsimplename}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号:">
              <span>{{materialData.fmodel}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分类:" class="select-disabled">
              <el-select v-model="materialData.fgroupid" disabled placeholder="请选择">
                <el-option
                  v-for="item in groupTreeData"
                  :key="item.nodeId"
                  :label="item.nodeName"
                  :value="item.nodeId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Tsyu from "@/api/basedataManager/Tsyu";
import TsGroup from "@/api/basedataManager/TsGroup";
  export default {
    name: 'material_detail',
    props:{
      width:{
        type : String,
        default : '60vw'
      },
      fid:{
        type : Number,
      },
    },
    data(){
      return{
        title:'物料详情',
        isShowVisible:true,
        isLoading:false,
        materialData:{},
        materialList:[],
        groupTreeData:[],
      }
    },
    async created(){
      this.isLoading = true
      let https = new TsyuGroup()
      let groupTreeData = await https.queryGroupTree({})
      groupTreeData.data.forEach((item, index) => {
        if(item.nodeId === -1){
          groupTreeData.data.splice(index, 1)
        }
      })
      this.groupTreeData = groupTreeData.data
      let http = new tsyu()
      this.title = '编辑物料'
      let materialData = await http.detail({fid:this.fid})
      this.materialData = materialData.data
      this.isLoading = false
    },
  }
</script>

<style scoped lang="scss">
  .select-disabled{
    /deep/ .is-disabled{
      .el-input__inner{
        color: #000;
      }
    }
  }

</style>
